<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>
  <script>
    /** @type {HTMLCanvasElement} */
    var canvas=document.querySelector("#canvas")
    var ctx=canvas.getContext("2d")
    ctx.save()
    //表盘.时
    // ctx.fillRect(0,0)
    
    // ctx.save()
    // ctx.restore()
    // ctx.fillRect(0,0,100,100)
    ctx.lineWidth=5
    // ctx.fillRect(0,0,100,100)
    
    // ctx.fillStyle="red"
    // ctx.rotate(Math.PI/6)
    
    // ctx.fillRect(0,0,100,100)
    
    
    //当前时间
    ctx.translate(200,200)
    function rend(){
      ctx.clearRect(-200,-200,400,400)
      ctx.save()
      // ctx.fillRect(0,0,100,100)
      // ctx.clearRect(-200,-200,400,400)
      //时
      for(var i=0;i<12;i++){
      ctx.beginPath()
      ctx.lineWidth=5
      
      // ctx.save()
      // "
      ctx.rotate(Math.PI/6)
      ctx.strokeStyle="black"
      ctx.moveTo(100,0)
      ctx.lineTo(110,0)
      ctx.stroke()
      // ctx.restore()
      ctx.closePath()
    }
    // ctx.restore()
    //表盘.分
    // ctx.restore()
    ctx.lineWidth=1
    ctx.save()
    ctx.strokeStyle="red"
    for(var i=0;i<60;i++){
      ctx.beginPath()
      
      ctx.rotate(Math.PI/6/5)
      ctx.moveTo(100,0)
      ctx.lineTo(110,0)
      ctx.stroke()
      ctx.closePath()

    }
    ctx.restore()
    // ctx.fillRect(0,0,100,100)
      // ctx.restore()
      // ctx.restore()
      // ctx.restore()
      // ctx.clearRect(0,0,400,400)
      
    var date=new Date()
    var shi=date.getHours()
    if(shi>12){
      shi=shi-12
    }
    var fen=date.getMinutes()
    var miao=date.getSeconds()
    //秒
    //秒针
    ctx.save()
    ctx.beginPath()
    // console.log(miao);
    ctx.strokeStyle="blue"
    // ctx.save()
    // ctx.fillRect(0,0,100,100)
    ctx.rotate(Math.PI/30*miao)
    // console.log(Math.PI/30*miao);
    // console.log(miao);
    console.log(fen);
    ctx.moveTo(0,0)
    ctx.lineTo(0,-100)
    ctx.stroke()
    ctx.restore()
    ctx.closePath()
    //分针
    // ctx.restore()
    ctx.save()
    ctx.beginPath()
    // ctx.restore()
    ctx.strokeStyle="red"
    // ctx.fillRect(0,0,100,100)
    // ctx.restore()
    // ctx.strokeStyle="blue"
     ctx.rotate(Math.PI/30*fen+Math.PI/30/60*miao)
    ctx.moveTo(0,0)
    ctx.lineTo(0,-100)
   
    // ctx.rotate(Math.PI/30*fen)
    // console.log(Math.PI/30*fen);
    // console.log(shi);
    ctx.stroke()
    ctx.closePath()
    ctx.restore()
    //时针
    ctx.beginPath()
    ctx.save()
    // ctx.restore()
    ctx.strokeStyle="skyblue"
    // console.log(111);
    // ctx.fillRect(0,0,100,100)
    // ctx.rotate(Math.PI/6*shi+Math.PI/30/60*fen+Math.PI/30/60/60*miao)
    ctx.rotate(Math.PI/6*shi+Math.PI/6/60*fen+Math.PI/6/60/60*miao)
    // ctx.rotate(Math.PI/30*fen+Math.PI/30/60*miao)
    // console.log(Math.PI/6*shi+Math.PI/30/60*fen+Math.PI/30/60/60*miao);
    ctx.moveTo(0,0)
    ctx.lineTo(0,-50)
    ctx.stroke()
    ctx.closePath()
    ctx.restore()
    // ctx.fillRect(0,0,100,100)
    requestAnimationFrame(rend)
    }
    rend()
  </script>
</body>
</html>